<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted, computed } from 'vue';
import { Search } from '@element-plus/icons-vue'

// 分页相关
 const currentPage4 = ref(1)
 const pageSize4 = ref(10)
 // 分页切换事件
const handleSizeChange = (val) => {
  pageSize4.value = val;
  // 触发数据重新加载（如调用接口）
};
const handleCurrentChange = (val) => {
  currentPage4.value = val;
  // 触发数据重新加载
};
//对话框标题
const dialogTitle = ref('修改产品信息')
const dialogTitleDelate = ref('删除产品信息')
const dialogTitlestop = ref('停用产品信息')

// 编辑
const handleEdit = (record) => {
  dialogVisible.value = true;
  title.value = '修改';
  form.value = { ...record }; // 回显数据
};
const handleDisable = (record) => {
  dialogVisiblestop.value = true;
  title.value = '停用';
  form.value = { ...record }; // 回显数据
};
const handleDelete = (record) => {
  dialogVisibledelate.value = true;
  title.value = '删除';
  form.value = { ...record }; // 回显数据
};
// 对话框
const dialogVisible = ref(false);
const dialogVisibledelate = ref(false);
const dialogVisiblestop = ref(false);
//必填规则
const rules = {
  productName: [{ required: true, message: '请输入服务产品名称', trigger: 'blur' }],
  productType: [{ required: true, message: '请选择产品类型', trigger: 'change' }],
  contractPrice: [{ required: true, message: '请输入合同价格', trigger: 'blur' }],
  serviceItems: [{ required: true, message: '请输入包含服务项', trigger: 'blur' }],
};
// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false;
};
const closeDialogdelate = () => {
  dialogVisibledelate.value = false;
};
const closeDialogstop = () => {
  dialogVisiblestop.value = false;
};
// 提交表单（编辑/新增逻辑）
const submitForm = () => {
  // 这里可添加接口请求逻辑，示例仅做演示
  console.log('提交数据：', form.value);
  closeDialog();
};

const columns = [
  // {
  //   title:'',
  //   key:'indexe',
  //   width:40

  // },
  {
    title: '服务产品名称',
    key: 'productName',
  },
  {
    title: '产品类型',
    key: 'productType',
  },
  {
    title: '合同价格（元）(1年或1次)',
    key: 'contractPrice',
  },
  {
    title: '包含服务项',
    key: 'serviceItems',
  },
  {
    title: '说明',
    key: 'description',
  },
];
const mockData = ref([]);
const loading = ref(true)
const input1 = ref('');
const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event);

    loading.value = true
    setTimeout(() => {
        if(activeName.value === 'first') {
            mockData.value = []
            loading.value = false
            return;
        }
        mockData.value = [
        ]
        loading.value = false
    }, 2000)
}
onMounted(() => {
    setTimeout(() => {
        mockData.value = [
        
        ]
        loading.value = false
    }, 2000)
})
 const rawTableData = ref([
    { productName: '服务A', productType: '周期服务', contractPrice: '10000', serviceItems: '项1', description: '无'},
    { productName: '服务B', productType: '周期服务', contractPrice: '128376', serviceItems: '项2', description: '无'},
    { productName: '服务C', productType: '单次服务', contractPrice: '34322', serviceItems: '项1', description: '无'},
    { productName: '服务D', productType: '单次服务', contractPrice: '123454', serviceItems: '项1', description: '无'},
 ]);
// 对话框相关
// const open = ref(false)
// const title = ref('添加或修改')
const form = ref({
    productName: '',
    productType: '',
    contractPrice: '',
    serviceItems: '',
    description:''
})
const handleOpen = () => {
    open.value = true
}
const handleClose = () => {
    open.value = false
}
const filteredTableData = computed(() => {
  return rawTableData.value.filter(item => {
    const typeMatch = 
      !form.value.productType ||  // 清空选择器时（值为空），不筛选类型
      form.value.productType === '全部产品类型' ||  // 选“全部”时，不筛选类型
      item.productType === form.value.productType;  // 选具体类型时
    const searchMatch = 
      input1.value === '' || 
      item.productName.toLowerCase().includes(input1.value.toLowerCase());
    return typeMatch && searchMatch;
  });
});
</script>

<template>
  <div class="page-container">
    <div class="top-filter">
      <div class="top-filter-left">
        <stick-popup>
          <template #show>
            <el-form :model="form" label-width="120px" class="top-filter-btn">
              <el-select v-model="form.productType" placeholder="全部产品类型" clearable>
                <el-option label="全部产品类型" value="全部产品类型" />
                <el-option label="周期服务" value="周期服务" />
                <el-option label="单次服务" value="单次服务" />
              </el-select>
            </el-form>
          </template>
        </stick-popup>
        <div class="top-filter-search">
          <el-input v-model="input1" placeholder="请输入产品名称">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <!-- 表格区域容器 -->
    <div class="table-container">
      <div class="table-area">
        <div class="table-area-table">
          <my-table 
            :loading="loading" 
            :columns="columns" 
            :dataSource="filteredTableData" 
            :showIndex="true" 
            :show-operation="true"
          >
            <template #operation="{ record }">
              <div class="operation-buttons">
                <a href="javascript:;" class="edit-btn" @click.stop="handleEdit(record)">编辑</a>
                <a href="javascript:;" class="disable-btn" @click.stop="handleDisable(record)">停用</a>
                <a href="javascript:;" class="delete-btn" @click.stop="handleDelete(record)">删除</a>
              </div>
            </template>
          </my-table>
        </div>
      </div>
    </div>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px" append-to-body>
            <el-form :model="form" :rules="rules" label-width="120px" ref="formRef">
                <el-form-item label="服务产品名称" prop="productName">
                    <el-input v-model="form.productName" placeholder="请输入服务产品名称" />
                </el-form-item>
                <el-form-item label="产品类型" ref="formRef">
                    <el-select v-model="form.productType" placeholder="请选择线索状态">
                        <el-option label="周期服务" value="周期服务"></el-option>
                        <el-option label="单次服务" value="单次服务"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="合同价格" prop="contractPrice">
                    <el-input v-model="form.contractPrice" placeholder="请输入合同价格" />
                </el-form-item>
                <el-form-item label="包含服务项" prop="serviceItems">
                    <el-input v-model="form.serviceItems" placeholder="请输入包含服务项" />
                </el-form-item>
                <el-form-item label="说明" prop="description">
                    <el-input v-model="form.description" placeholder="请输入说明" />
                </el-form-item> 
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="closeDialog">确 定</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
    </el-dialog>
    <el-dialog :title="dialogTitleDelate " v-model="dialogVisibledelate" width="500px" append-to-body>
      <template #footer>
        <el-button type="primary" @click="closeDialogdelate">确认删除</el-button>
        <el-button @click="closeDialogdelate">取消</el-button>
      </template>
    </el-dialog>
    <el-dialog :title="dialogTitlestop " v-model="dialogVisiblestop" width="500px" append-to-body>
      <template #footer>
        <el-button type="primary" @click="closeDialogstop">确认停用</el-button>
        <el-button @click="closeDialogstop">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.page-container {
  width: 100%;
  height: 100vh;
  background-color: rgb(239, 239, 239);
  overflow-x: hidden;
  display: flex;
  flex-direction: column; 
}

.top-filter {
  width: 100%;
  height: 60px; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 9;
}


.table-container {
  flex: 1; 
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.table-area {
  width: 100%; 
  height: 100%; 
  margin: 0; 
  box-shadow: 0 0 10px 0 #ddd;
  background-color: #fff;
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; 
}

.table-area-table {
  flex: 1; /* 表格部分占满可用高度 */
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto; 
}

.table-pagination {
  width: 100%;
  margin: 20px 0 0 0;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

.top-filter-left {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 10px;
  .top-filter-btn {
    width: 140px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    user-select: none;
  }
  .top-filter-search {
    width: 200px;
  }
}
.operation-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

.operation-buttons a {
  padding: 6px 12px;
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 0;
  font-weight: 500;
}
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.operation-buttons .edit-btn {
  color: #409EFF; /* 编辑按钮 */
}
.operation-buttons .disable-btn {
  color: #F56C6C; /* 停用按钮 */
}
.operation-buttons .delete-btn {
  color: #606266; /* 删除按钮 */
}
.top-filter-form, .top-filter-operate {
  width: 400px;
  background-color: #fff;
}
</style>